const path = require("path");
const vLoader = require("vue-loader");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "webpack-numbers.js",
    // library: "webpackNumbers",
    // 以上写法无法支持commjs 或者 amd方式引用 所以
    // 现在 webpack 将打包一个库，其可以与 CommonJS、AMD 以及 script 标签使用
    clean: true, // 构建前清除dist文件夹
    publicPath: "/",
    library: {
      name: "webpackNumbers",
      type: "umd",
    },
  },
  devtool: "inline-source-map",
  devServer: {
    static: "./dist",
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // 只解析
        include: path.resolve(__dirname, "src"),
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.js$/,
        loader: "./loaders/hello-loader",
        options: {
          author: "hello loader",
          email: "helloloader@qq.com",
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: "Vue project is coming",
      template: "./public/index.html",
    }),
  ],

  // externals: {
  //   lodash: {
  //     commonjs: "lodash",
  //     commonjs2: "lodash",
  //     amd: "lodash",
  //     root: "_",
  //   },
  // },

  // 对于想要实现从一个依赖中调用多个文件的那些 library
  // import A from 'library/one';
  // import B from 'library/two';
  // 无法通过在 externals 中指定整个 library 的方式，将它们从 bundle 中排除。
  // 而是需要逐个或者使用一个正则表达式，来排除它们
  // externals: [
  //   "library/one",
  //   "library/two",
  //   // 匹配以 "library/" 开始的所有依赖
  //   /^library\/.+$/,
  // ],
};
